<template>
    <div class="yw-detail-container" id="detail-audio">
        <!-- 视频播放 -->
        <div class="img-bj-box position-r" :style="{height:swiperHeight + 'px'}">
            <div class="giftTX" v-if="isGiftTx != ''" v-html="giftTx"></div>
            <div class="swiper-box" :style="{height:swiperHeight + 'px'}">
                <van-swipe :show-indicators="false" :style="{height:swiperHeight + 'px'}" :touchable="true">
                    <van-swipe-item v-for="(item,index) in userPhoto" :key="index">
                        <div v-if="item.indexOf('mp4')>0" class="position-r">
                            <video id="myvideo" :src="$imgPath(item)" :poster="$imgPath(item)" width="100%" :height="swiperHeight + 'px'" x5-playsinline  playsinline="isiPhoneShowPlaysinline" webkit-playsinline="isiPhoneShowPlaysinline" x-webkit-airplay="" preload="none" data-role="txp_video_tag"></video>
                            <span class="ico-video" v-if="isVideoPlay" @click="playClick()"></span>
                        </div>
                        <div class="swipe-img-box" v-else :style="{height:swiperHeight + 'px',lineHeight:swiperHeight + 'px'}">
                            <img :src="$imgPath(item)" />
                        </div>                                            
                    </van-swipe-item>
                </van-swipe> 
            </div>
            <div class="share-data">
                <div class="step1 clearfix">
                    <ul>
                        <li class="fl" @click="userDetail(personal.userId)"><img :src="$imgPath(personal.headImg)" /></li>
                        <li class="fl">
                            <p class="clearfix mon-box">
                                <span class="nickname fl">{{personal.nickName}}</span>
                                <span class="sex fl">
                                <img src="../assets/image/index/img_female.png"  v-if="personal.sex == 2"/>
                                <img src="../assets/image/index/img_male.png" v-if="personal.sex == 1" />
                                <img src="../assets/image/icon_unknown.png" v-if="personal.sex == 0" />
                                </span>
                                <span class="age fl">{{personal.age}}</span>
                            </p>
                            <p class="mon-box">
                                <span class="city">{{personal.city}}</span>
                                <span class="orderTimes">接单{{personal.num}}次</span>
                            </p>
                        </li>
                        <li>
                            <span class="btn btn-default" v-if="personal.onlineStatus == 0">在线</span>
                            <span class="btn btn-default" v-else>下线</span>
                        </li>
                    </ul>
                    <span class="share" @click="shareBox()"></span>
                </div>
            </div> 
            <p class="service">
                <img :src="$imgPath(item.serverLogo)" v-for="(item,index) in service" :key="index" @click="listentServiceEvent(item.serverId),goodsId = item.serverAuthId" />
            </p>
            <div class="fr step2">
                
                <p @click="dashuangIS()" v-if="userType!==0"><img src="../assets/image/detail/icon_reward@2x.png" /><span>打赏</span></p>
                <p @click="chatLink()" v-if="userType!==0"><img src="../assets/image/detail/icon_chat@2x.png" /><span>对话</span></p>
                <p @click="rankList()"><img src="../assets/image/detail/icon_evaluate@2x.png" /><span>评价</span></p>
            </div>                          
            <div class="server-descript">
                 <div class="fl step4">
                    <p class="label color-fff game-name-bjc text-align-c">{{personal.serverName}}</p>
                    <p class="label color-fff game-dw-bjc text-align-c">{{personal.division}}</p>
                </div>
                <div class="step3">
                    <p>{{personal.descript}}</p>
                    <!-- 用户相册第一张是图片，语音自动播放 -->
                     <!-- 用户相册第一张是视频，视频自动播放，语音手动播放 -->
                    <p>
                        <span class="btn-audio btn-audio-img" @click="changeImg">
                            <em></em>
                            <span ref="miao">{{personal.audioTime}}</span>
                            <audio id="audiotrue" :src="$imgPath(personal.audioUrl)" controls="true"></audio>
                        </span>
                       <!--  <span class="btn-audio btn-audio-gif" v-if="personal.isGif==false" @click="changeImg">
                            <em></em>
                            <span>{{audioTime}}''</span>
                            <audio id="audiofalse" :src="$imgPath(personal.audioUrl)" controls="true"></audio> 
                        </span>   &yen;-->
                        <span class="btn-buy btn-success" @click="yaoqing()">邀请</span>
                        <!-- <span class="btn-buy btn-success" @click="clickOrder()" v-if="userType!==0 && iosTrue == false">{{personal.price}}钻石/{{personal.priceUnit}} 立即下单</span> -->
                        <span class="close" @click="$router.push({name:'index'})"></span>
                    </p>
                </div>
               
            </div>
        </div>
        <!-- end// -->
        <!-- 选择时间 -->
        <van-popup v-model="timeSelected" position="bottom" class="yw-popup-payfor">
            <div>
                <van-row class="title">
                    <van-col span="12"><span class="dispaly-block" @click="timeSelected = !timeSelected">确定</span></van-col>
                    <van-col span="12"><span class="text-align-r dispaly-block" @click="timeSelected = !timeSelected,placeTiem='现在'">取消</span></van-col>
                </van-row>
                <van-picker :columns="timecolumns" @change="onChangeTime" />
            </div>
        </van-popup>
        <!-- 选择时间end// -->
        <!-- 立即下单pop -->
        <van-popup v-model="payfor" position="bottom" class="yw-popup-payfor">
            <div>
                <van-row class="title">
                    <van-col span="12">下单</van-col>
                    <van-col span="12"><em class="icons_close" @click="payfor = !payfor"></em></van-col>
                </van-row>
                <van-cell-group>
                    <div class="pinlei" @click="serviceLb = true">
                        <span class="color-9 fl">服务品类</span>
                        <i class="van-icon van-icon-arrow van-cell__right-icon fr"></i>
                        <span class="fr">{{onchangename}}</span> 
                    </div>
                    <div class="pinlei" @click="timeSelected = !timeSelected,makeTime()">
                        <span class="color-9 fl">开始时间</span>
                        <i class="van-icon van-icon-arrow van-cell__right-icon fr"></i>
                        <span class="fr">{{placeTiem}}</span> 
                    </div>
                    <div class="pinlei">
                        <span class="color-9 fl">服务数量</span>
                        <span class="addplus fr">
                            <van-stepper v-model="payforNum" integer :min="1" :max="100" :step="1"/>
                        </span> 
                    </div>
                    <div class="pinlei" @click="showList = !showList">
                        <span class="color-9 fl">使用优惠</span>
                        <i class="van-icon van-icon-arrow van-cell__right-icon fr"></i>
                        <span class="fr" v-if="yhqPrice == 0">暂无优惠券</span>
                        <span class="fr" v-else @click.stop="showList = !showList">-￥{{yhqPrice}}</span>
                    </div>
                </van-cell-group>
                <van-row class="footer">
                    <!-- &yen; -->
                    <van-col span="12" class="money">合计: <span>{{totalPrice}}钻石</span></van-col>
                    <van-col span="12" class="text-align-r"><span class="btn-f00 btn-success" @click="listentopayfor()">立即下单</span></van-col>
                </van-row>
            </div>
        </van-popup>
        <!-- end// -->
        <!-- 选择服务类弹框 -->
        <van-popup v-model="serviceLb" position="bottom" class="yw-popup-payfor">
            <div>
                <van-row class="title">
                    <van-col span="12">选择服务品类</van-col>
                    <van-col span="12"><em class="icons_close" @click="serviceLb = !serviceLb"></em></van-col>
                </van-row>
                <van-picker :columns="columns" @change="onChange" /> <!-- 服务下拉滑动 -->
            </div>
        </van-popup>
        <!-- 选择服务弹框 end// -->
        <!-- 支付方式pop -->
        <van-popup v-model="paymentMoney" position="bottom" class="yw-popup-payment">
            <div>
                <van-row class="title">
                    <van-col span="12">选择支付方式</van-col>
                    <van-col span="12"><em class="icons_close" v-on:click="closePayment"></em></van-col>
                </van-row>
                <!-- &yen; -->
                <p class="color-3 text-align-c salay">{{totalPrice}}钻石</p>
                <van-radio-group v-model="paymentRadio">
                    <van-cell-group>
                        <!-- <van-cell title="支付宝支付" clickable @click="paymentRadio = '1'">
                            <van-radio name="1" />
                        </van-cell>
                        <van-cell title="微信支付" clickable @click="paymentRadio = '2'">
                            <van-radio name="2" />
                        </van-cell> -->
                        <van-cell @click="yuESelect = !yuESelect">
                            <i class="quan" :class="[yuESelect ? 'yuESelect' : '']"></i>
                            <span class="fl">余额支付</span>
                            <span class="fl color-9">（余额：{{zfZhyue}}钻石）</span>
                            <span class="fr color-default chongzhi" @click.stop="chongzhiLink()">充值</span>
                        </van-cell>
                    </van-cell-group>
                </van-radio-group>
                <van-row class="footer">
                    <van-col span="24" class="text-align-c"><span @click="clickpayforEvent()" class="btn-f00 btn-success">立即支付</span></van-col>
                </van-row>
            </div>
        </van-popup>
        <!-- end// -->
        <!-- 评论pop -->
        <van-popup v-model="artlist" position="bottom" class="yw-popup-list">
            <div style="padding: 0">
                <van-row class="title">
                    <van-col span="4">评价({{totalElements}})</van-col>
                    <van-col span="18" class="text-align-r">
                        <van-rate v-model="bigStar" :size="16" :count="5" disabled  disabled-color="#D84F4D"/>
                    </van-col>
                    <van-col span="2"><em class="icons_close" @click="artlist = !artlist"></em></van-col>
                </van-row>
                <div class="artLabel">
                    <van-tag plain class="label0 label-3" v-for="(item,index) in commentTags" :key="index" :class="[commTagsIndex == item.id ? 'commTagsIndexClass' : '']">
                        <span @click="commTagsIndex = item.id,pwComment()">
                            {{item.name}}{{item.count}}
                        </span>
                    </van-tag>
                </div>
                <van-row class="list" v-for="(item,index) in commentList" :key="index">
                    <van-col span="4"><img class="border-radius-50" :src="$imgPath(item.user.headImg)" /></van-col>
                    <van-col span="20" offset="0">
                        <van-row class="color-3 margin-bot">
                            <van-col span="12" class="font-3">{{item.user.nickname}}</van-col>
                            <van-col span="12" class="text-align-r">
                                <van-rate v-model="item.rank" :size="12" :count="5" disabled  disabled-color="#D84F4D" />
                            </van-col>
                        </van-row>
                        <van-row class="color-6 margin-bot">
                            <van-col class="word-break">{{item.content}}</van-col>
                        </van-row>
                        <van-row class="color-9 margin-bot">
                            <van-col span="18" class="icons_tags">
                                <span v-for="(itemt,indext) in item.tags" :key="indext">{{itemt.descript}}</span>
                            </van-col>
                            <van-col span="6" class="text-align-r">{{$time1(item.createTime)}}</van-col>
                        </van-row>
                    </van-col>
                </van-row>
            </div>
        </van-popup>
        <!-- end// -->
        <!-- 打赏pop -->
        <van-popup v-model="present" position="bottom" class="yw-popup-present"> 
            <div style="padding: 0">
                <van-row class="title">
                    <van-col span="12">全部礼物</van-col>
                    <van-col span="12"><em class="icons_close" @click="present = !present"></em></van-col>
                </van-row>
                <van-swipe class="presentSwiper">
                    <van-swipe-item  v-for="(item,index) in giftList" :key="index">
                        <div class="listds" v-for="(items,index) in item" :key="index" >
                            <img :src="$giftPath(items.image)" @click="sXzsDj = items.price,giftId = items.id,buyGift(1,items),buyPresent = !buyPresent"/>
                            <p class="font-3 color-3">{{items.name}}</p>
                            <p class="font-24 color-9">{{items.price}}钻</p>
                        </div>
                    </van-swipe-item>
                </van-swipe>
                <van-row class="footer">
                    <van-col span="12" class="money">钻石：{{myDiamondBalance}}</van-col>
                    <van-col span="12" class="text-align-r"><span @click="zsCongzhi()" class="btn-f00 btn-success">充值</span></van-col>
                </van-row>
            </div>
        </van-popup>
        <!-- end// -->
        <!-- 分享pop -->
        <van-popup v-model="share" position="bottom" class="yw-popup-share">
            <share @shareValue="shareValue" :share="share"></share>
        </van-popup>
        <!-- end// -->
        <!-- 购买礼物弹框 -->
        <van-popup v-model="buyPresent" class="buypresent">
            <div>
                <p>
                    <van-row>
                        <van-col span="12" class="color-3 font-3">选择数量</van-col>
                        <van-col span="12" class="text-align-r"><van-stepper v-model="number" integer :min="1" :max="999999999" :step="1" @input="buyGift(2)" /></van-col>
                    </van-row>
                </p>
                <p>
                    <van-row>
                        <van-col span="12" class="color-9 font-3">所需钻石：</van-col>
                        <van-col span="12" class="text-align-r"><span class="color-3 font-3 queen">{{sXzs}}</span></van-col>
                    </van-row>
                    <van-row>
                        <van-col span="12" class="color-9 font-3">钻石余额：</van-col>
                        <van-col span="12" class="text-align-r"><span class="color-3 font-3 queen">{{zsYe}}</span></van-col>
                    </van-row>
                    <van-row v-show="yeDk">
                        <van-col span="12" class="color-9 font-3">余额抵扣：</van-col>
                        <van-col span="12" class="text-align-r">
                            <span class="color-3 font-3">-&yen;{{zhye}}(<span class="queen">{{zsZheHe}}</span>)</span>
                        </van-col>
                    </van-row>
                    <van-row class="line" v-if="rmbZhiFu > 0">
                        <van-col span="12" class="color-3 font-3">还需付款</van-col>
                        <van-col span="12" class="text-align-r"><span class="font-3 color-default">&yen;{{rmbZhiFu}}</span></van-col>
                    </van-row>
                </p>
                <p class="payfor mb0 pb0 clearfix">
                    <span class="font-3 color-3" v-if="rmbZhiFu > 0 && isZhongduan == false">选择支付方式</span>
                    <!-- <van-radio-group v-model="presentRadio" class="action clearfix"  v-if="rmbZhiFu > 0 && isZhongduan == false">
                        <van-cell-group>
                            <van-cell title="支付宝支付" clickable @click="presentRadio = '1'">
                                <van-radio name="1" />
                            </van-cell>
                            <van-cell title="微信支付" clickable @click="presentRadio = '2'">
                                <van-radio name="2" />
                            </van-cell>
                        </van-cell-group>
                    </van-radio-group> -->
                    <van-row class="carryok clearfix">
                        <van-col span="12" class="color-9 font-3 text-align-c">
                            <span @click="buyPresent = false,number=1,rmbZhiFu=0">取消</span>
                        </van-col>
                        <van-col span="12" class="color-default font-3 text-align-c">
                            <span @click="giftPay()">确定</span>
                        </van-col>
                    </van-row>
                </p>
            </div>
        </van-popup>
        <!-- 充值弹框 -->
        <van-popup v-model="reCharge" position="bottom" class="yw-popup-recharge">
            <van-col style="padding: 0">
                <van-row class="title">
                    <van-col span="12">购买钻石</van-col>
                    <van-col span="12"><em class="icons_close" @click="reCharge = !reCharge"></em></van-col>
                </van-row>
            <van-col class="zhuanshi-box">
                <p class="desc bb0 color-9">钻石金额：{{myDiamondBalance}}</p>
                <van-row gutter="15">
                    <van-col span="8" v-for="(item,index) in diamondData" :key="index" :class="[index > 2 ? 'paddingTop15' : '',active == index ? 'active' : '']">
                        <div class="zuanshi-box position-r" @click="activeClick(index,item)">
                            <span class="zuanshi-box-span color-9">
                                <img class="fl" src="../assets/image/center/img_diamonds_s.png" alt="" srcset="">
                                <em class="fl font-28">{{item.name}}</em>
                            </span>
                            <span class="font-3">￥{{item.price}}</span>
                            <span class="song text-align-r">
                                送{{item.present}}钻
                            </span>
                        </div>
                    </van-col>
                </van-row>
                <p class="text-align-c color-9 desc">充值金额可购买：{{diamond}}钻，额外赠送 {{presentDiamond}}钻</p>
                <input type="number" class="input-zuan text-align-c" maxlength="10" placeholder="请输入其他金额" v-model="otherMoney" @input="otherInput()"/>
                <van-cell-group class="border-bottom">
                   <div class="zhifu-box">
                        <span class="zhifu-tit color-9 fl">支付方式</span>  
                        <div class="zhifu">
                            <!-- <span class="fl" v-for="(item,index) in zhifuType" :key="index" @click="selectZhiFu(index)">
                                <img class="fangshi fl" v-if="index == 0" src="../assets/image/center/icon_wx.png" alt="">
                                <img class="fangshi fl" v-if="index == 1" src="../assets/image/center/icon_zfb.png" alt="">
                                {{item}}
                                <img class="fr xuanze" v-if="zfType == index" src="../assets/image/center/icon_select.png" alt="" srcset="">
                                <img class="fr xuanze" v-else src="../assets/image/center/icon_unchecked.png" alt="" srcset="">
                            </span> -->
                            <span @click="selectYu()">
                                <i class="quan" :class="[yuESelect ? 'yuESelect' : '']"></i>
                                余额支付（余额：{{zfZhyue}}钻石）
                            </span>
                        </div>
                   </div>
                </van-cell-group>
            </van-col>
            <van-row class="footer border-none">
                <van-col span="24" class="text-align-c"><span @click="clickRechargeEvent()" class="btn-f00 btn-success">确认支付{{selectMoney}}元</span></van-col>
            </van-row>
            </van-col>
        </van-popup>
        <!-- 充值弹框 end// -->
        <!-- 优惠券弹框 -->
        <van-popup v-model="showList" position="bottom" class="detail-yiq">
            <van-coupon-list
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                :disabled-coupons="disabledCoupons"
                @change="onChangeYhq"
            />
        </van-popup>
   </div>
</template>
<script>
import apiHttp from '../api/index'
import share from '@/components/common/share'
import api from '../api/index'
import { Toast } from 'vant'
//选择下拉日期  今天
const day = new Date()
day.setTime(day.getTime())
const today = (day.getMonth()+1) + "月" + day.getDate() + '日' + '今天'
// 明天
const day2 = new Date();
day2.setTime(day2.getTime()+24*60*60*1000)
const tomorrow = (day2.getMonth()+1) + "月" + day2.getDate() + '日' + '明天'
// 后天
const day3 = new Date();
day3.setTime(day3.getTime()+24*60*60*1000*2)
const dayTomorrow = (day3.getMonth()+1) + "月" + day3.getDate() + '日' + '后天'

const hours = ['00点', '01点', '02点', '03点', '04点', '05点', '06点', '07点', '08点', '09点', '10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点'];
const minutes = ['00分', '01分', '02分', '03分', '04分', '05分', '06分', '07分', '08分', '09分', '10分', '11分', '12分', '13分', '14分', '15分', '16分', '17分', '18分', '19分', '20分', '21分', '22分', '23分',
                '24分', '25分', '26分', '27分', '28分', '29分', '30分', '31分', '32分', '33分', '34分', '35分', '36分', '37分', '38分', '39分', '40分', '41分', '42分', '43分', '44分', '45分', '46分', '47分',
                '48分', '49分', '50分', '51分', '52分', '53分', '54分', '55分', '56分', '57分', '58分', '59分'];  
const days = {
    '':{hours,minutes},
    '':{hours,minutes},
    '':{hours,minutes},
};
const dd = [today,tomorrow,dayTomorrow]
export default {
    data() {
        return {
            iosTrue:this.$store.state.iosTrue,
            goodsId:'',
            giftTx:'',
            isGiftTx:false,
            isGiftTxTime:0,
            zhifuType:['微信','支付宝'],
            chosenCoupon:-1,
            coupons: [],
            disabledCoupons: [],
            showList:false,
            bigStar:0,
            userId:this.$route.params.userId,
            serviceId:this.$route.params.serviceId,
            personal: {},
            service: [],
            userPhoto: [],
            columns: [],//服务
            timecolumns:[
                {
                  values: dd,
                  className: 'column1',
                  defaultIndex:0
                },
                {
                  values: Object.values(days)[0].hours,/*从第0个开始------时*/
                  className: 'column2',
                  defaultIndex: 2
                },
                {
                  values: Object.values(days)[0].minutes,/*从第0个开始----分*/
                  className: 'column3',
                  defaultIndex: 1
                }
            ],
            onchangename: '',  //更改服务
            payforMethodation: '微信支付',   //回显支付方式
            payforNum: 1,   //立即下单数量
            number: 1,      // 购买礼物时的礼物数量
            presentRadio: '1',    //购买礼物支付方式
            paymentRadio: '2',    //默认微信支付
            artlist: false,
            payfor: false,
            serviceLb: false,
            paymentMoney: false,
            present: false,
            share: false,
            buyPresent:false,
            reCharge:false,
            timeSelected: false,
            orderpayforId: '',   //生成订单id
            serviceAuthId: '',   //服务认证id
            _dom:"",
            videoSrc:'',
            playStatus:'',
            muteStatus:'',
            isMute:true,
            isPlay:false,
            swiperHeight:'',
            pwPrice:'',
            yhqFh:'-￥',
            yhqPrice:0,
            yuESelect:true,
            giftList:[],        // 礼物列表
            myDiamondBalance:'',// 剩余钻石
            sXzsDj:'',   
            sXzs:'',  
            yeDk:false,
            zhye:'',
            zsZheHe:'',
            rmbZhiFu:0, 
            giftId:'',
            commentList:[],
            totalElements:'',
            diamondData:[],
            port:'Android',//端口
            diamond:0,//输入金额购买的钻石数量
            presentDiamond:0,//赠送钻石
            active:0,
            otherMoney:'',
            commentTags:[],
            commTagsIndex:0,
            zfZhyue:'',
            userType:this.$route.query.userType,
            yhqId:'',
            zfType:-1,
            selectMoney:'',
            payType:'',
            autoCost:'',
            autoplay:false,
            placeTiem:'现在',
            orderT:'',
            formZFB:'',
            source:'1',
            locationHref:window.location.href,
            isZhongduan:false,
            audioTime:'', //语音时间
            isImg:false,
            autoplay:'',
            audioSrc:'',
            _dom:'',
            isVideoPlay:true,
            timer:'',
        }
    },   
    components:{
        share
    },
    watch:{
        payforNum(newVal,oldVal){
            if(newVal != oldVal){
                this.couponsList()
            }
        },
        yuESelect(newVal,oldVal){
            if(newVal == true){
                this.paymentRadio = 3
            }
        },
        paymentRadio(newVal,oldVal){
            this.paymentRadio = newVal
            if(this.pwPrice < this.zfZhyue){
                this.yuESelect = true
            }
        },
        buyPresent(newVal,oldVal){
            if(newVal == false){
                this.buyPresent = false
                this.number=1
                this.rmbZhiFu=0
            }
        },
        isGiftTxTime(newVal,oldVal){
            if(newVal > 0){
                setTimeout(()=>{
                    this.giftTx = ''
                    this.isGiftTx = false
                    this.isGiftTxTime = 0
                },this.isGiftTxTime * 1000)
            }
        },
        service(newVal,oldVal){
            if(oldVal.length == 0){
                this.goodsId = newVal[0].serverAuthId
            }
        }
    },
    computed:{
        // 预约下单时间转化
        makeTime(){
            let dateTime = new Date()
            this.timecolumns[1].defaultIndex = dateTime.getHours()
            this.timecolumns[2].defaultIndex = dateTime.getMinutes()       
        },
        // 计算总价
        totalPrice(){
            if(this.pwPrice != 0){
                return (this.pwPrice * this.payforNum - this.yhqPrice).toFixed(2)
            }else{
                return 0
            }  
        },
        // 购买礼物时计算钻石剩余
        zsYe(){
            if(this.myDiamondBalance - this.sXzs > 0){
                this.yeDk = false
                return this.myDiamondBalance - this.sXzs
            }else if(this.myDiamondBalance - this.sXzs < 0){
                this.yeDk = true
                this.credits2rmb(this.sXzs - this.myDiamondBalance)
                return 0
            }else{
                return 0
            } 
        },
        
    },
    created(){
        let self = this
        this.swiperHeight = document.body.clientHeight
        window.iosZFBsuccess = this.iosZFBsuccess
        if(this.$store.state.token !=''){
            this.getUserWalletDetail()
            this.getsysDiamondInstallList()
            this.kxTime()
            this.getAllGiftList()
        }
        this.personalMessage()
        if(this.$store.state.iosTrue == true){
            self.isZhongduan = true
        }else{
            self.isZhongduan = false
        }
    },
    methods: { 
        yaoqing(){
            Toast.success('邀请成功，等待对方确认！')
        },
        // 组件交互
        shareValue(value){
            this.share = value
        },
        // 视频播放
        playClick(){
            let self = this
            self._dom = document.getElementById('myvideo')
            self.isVideoPlay = false
            self._dom.play()
            setTimeout(()=>{
                self.isVideoPlay = true
            },self._dom.duration * 1000)
        },
        //判断用户相册第一个是图片还是视频
        checkImg(){
            var filename = this.userPhoto[0];//文件路径地址
            var index1 = this.$last(filename);
            var index2=filename.length;
          //获取文件后缀名
           var postf = this.$str(filename,index1,index2);
            //判断文件后缀名是否等于视频文件的后缀名
            if(postf=='.mp4'||postf=='.rmvb'||postf=='.avi'||postf=='.ts'){
                this.isImg = false;
                this.personal.isGif = false;
            }else{
                this.isImg = true;
                this.personal.isGif = true;
                this.autoplay = "autoplay";                            
                //语音倒计时
                if(this.audioTime==null||this.audioTime==''||this.audioTime==undefined||this.personal.audioUrl==null||this.personal.audioUrl==''||this.personal.audioUrl==undefined){
                    this.personal.isGif = false;
                }else{
                   this.timer = setInterval(()=>{
                        if(this.personal.audioTime== 0){
                            clearInterval(this.timer);
                            this.personal.isGif = false;
                            this.personal.audioTime = this.audioTime;                      
                        }else{
                            this.personal.audioTime = this.personal.audioTime;
                            --this.personal.audioTime;
                        }
                    },1000); 
                }
            }            
        },
        //切换语音动图
        changeImg(){
            let self = this
            let miao = this.$refs.miao
            this.personal.audioUrl = `${this.audioSrc}`;
            let audio1 = document.getElementById('audiotrue');                
            if(audio1.paused){
                setTimeout(()=>{
                    audio1.play()
                },200)         
                //语音倒计时 
                self.timer = setInterval(()=>{
                    if(self.personal.audioTime == 0){
                        clearInterval(self.timer)
                        self.personal.audioTime = this.audioTime
                        self.personal.audioUrl = ''            
                    }else{
                        self.personal.audioTime--
                        miao--
                    }
                },1000); 
            }else{
                setTimeout(()=>{
                    audio1.pause()
                },200)      
                clearInterval(self.timer)
                self.personal.audioUrl = ``
                self.personal.audioTime = self.audioTime;                            
            }                                         
        },
        //  充值跳转链接
        chongzhiLink(){
            let self = this
            if(this.$store.state.iosTrue == true){
                self.$router.push({
                    path:'/iosMoneyTopUp'
                })
            }else{
                self.$router.push({
                    path:'/moneyTopUp'
                })
            }
        },
        //  分享
        shareBox(){
            if(this.$store.state.iosTrue == true){
                let st = `${this.locationHref}|${this.personal.nickName}的详情页|${this.$imgPath(this.personal.headImg)}`
                window.webkit.messageHandlers.wxShare.postMessage(st)
            }else{
                this.share = !this.share
            }
        },
        //  打赏充值判断，ios跳转页面
        zsCongzhi(){
            let self = this
            if(this.$store.state.iosTrue == true){
                self.$router.push({
                        name:'iosTopUp'
                    })
            }else{
                self.reCharge = !self.reCharge
            }
        },
        //  点击打赏判断登陆
        dashuangIS(){
            if(this.$store.state.token !=''){
                this.present = true
            }else{
                this.$router.push({
                    path:'/login'
                })
            }
        },
        // 点击对话跳转
        chatLink(){
            this.$router.push({
                name:'chat',
                query:{
                    to_code:this.personal.code,
                    to_username:this.personal.nickName,
                    to_userId:this.personal.userId,
                    to_headImg:this.personal.headImg
                }
            })
        },
        //点击头像跳到个人中心页面
        userDetail(userId){
            this.$router.push({
                name:"center",
                query:{userId:userId}
            });
        },
        // 获取服务人员的空闲时间
        kxTime(){
            let params = {
                sellerId:this.userId
            }
            apiHttp.detailHttp.busyTimes(params,resp=>{
                if(resp.code == 200){
                    //console.log(resp)
                }
            })
        },
        // 优惠券面值
        onChangeYhq(index) {
            this.showList = false
            this.chosenCoupon = index
            if(index>=0){
                this.chosenCoupon = index
                this.yhqPrice = this.coupons[index].value / 100
                this.yhqId = this.coupons[index].id
            }else{
                this.chosenCoupon = -1
                this.yhqPrice = ''
                this.yhqId = ''
            }
            
        },
        // 优惠券列表
        couponsList(){
            this.coupons = []
            this.disabledCoupons = []
            let params = {
                price:this.pwPrice * this.payforNum
            }
            apiHttp.detailHttp.usableList(params,resp=>{
                if(resp.code == 200){
                    for(let i=0;i<resp.data.length;i++){
                        let obj = {
                            id:'',
                            denominations: '',
                            originCondition: '',
                            value: '',
                            name: '',
                            startAt: '',
                            endAt: ''
                        }
                        obj.id = resp.data[i].coupon.id
                        obj.denominations = resp.data[i].coupon.price * 100   
                        obj.originCondition = resp.data[i].coupon.validScope * 100
                        obj.value = resp.data[i].coupon.price * 100
                        obj.name = resp.data[i].coupon.title
                        obj.startAt = resp.data[i].coupon.startTime / 1000
                        obj.endAt = resp.data[i].coupon.endTime / 1000
                        this.coupons.push(obj)
                        this.disabledCoupons.push(obj)
                    }
                    if(resp.data.length>0){
                        this.yhqPrice = resp.data[0].coupon.price
                        this.yhqId = resp.data[0].coupon.id
                    }else{
                        this.yhqPrice = 0
                        this.yhqId = ''
                    }
                }
            })
        },
        //查询会员账户钻石余额和余额
        getUserWalletDetail(){
            let that = this
            apiHttp.apiCenter.getUserWalletDetail('',resp=> {
                if(resp.code==200){
                    that.myDiamondBalance = resp.data.credits
                    that.zfZhyue  = resp.data.recharge
                }else{
                    Toast(resp.message)
                }
            })
        },
        //礼物展示列表
        getAllGiftList() {
            let that = this;
            apiHttp.apiCenter.getAllGiftList('', resp => {
                if (resp.code == 200) {
                    let length = resp.data.length;
                    let end = 0;
                    let start = 8;
                    do {
                        let arr = resp.data.slice(end, start);
                        that.giftList.push(arr);
                        end = start;
                        start += start;
                    } while (length > end);
                    
                } else {
                    Toast(resp.message)
                }
            })
        },
        // 购买礼物计算总价
        buyGift(type,item){
            let num=Math.floor(Math.random()*10+1)
            if(type == 1){
                this.giftTx = `<img src="${this.$giftPath(item.specialEfficiency) + '?' + num}" />`
                this.isGiftTxTime = item.level
            }
            this.sXzs = this.sXzsDj * this.number
        },
        // 抵扣计算
        credits2rmb(zs){
            let params = {
                money:zs,
                platform:1      // 1 APP(非IOS）  2IOS   3WEB
            }
            apiHttp.apiCenter.credits2rmb(params,resp=>{
                if(resp.code == 200){
                    this.zhye = resp.data.finalMoney
                    this.zsZheHe = resp.data.money
                    this.rmbZhiFu = resp.data.needPay
                }
            })
        },
        // 购买礼物支付
        giftPay(){
            let payType = '',self = this
            if(self.$isiOS){
                if(window.webkit == undefined || window.webkit == '' || window.webkit == null){
                    if(self.paymentRadio == 1){
                        payType = 10
                    }else if(self.paymentRadio == 2){
                        payType = 2
                    }
                }else{
                    payType = ''
                }
            }else if(self.$isAndroid){
                if(self.paymentRadio == 1){
                    payType = 10
                }else if(self.paymentRadio == 2){
                    payType = 2
                }else {
                    payType = ''
                }
            }
            let params = {
                count:this.number,
                giftId:this.giftId,
                payType:payType,    // 支付类型: 1微信公众号 2微信H5 3微信APP；10支付宝; 11支付宝H5 12支付宝app 100余额支付 101代币（钻石）支付
                receiveUserId:this.userId,
                source:1,     // 订单来源 1APP 2IOS 3WEB
                autoCost:true
            }
            apiHttp.apiCenter.giftPay(params,resp=>{
                if(resp.code == 200){
                    this.buyPresent = false
                    this.present = false
                    this.getUserWalletDetail()
                    this.isGiftTx = true     
                }else if(resp.code == 428){
                    Toast(`${resp.message},请先充值`)
                    setTimeout(()=>{
                        self.$router.push({
                            path:'/iosTopUp'
                        })
                    },2000)
                }else{
                    Toast(resp.message)
                }
            })
        },
        // 评价总评星和评价标签
        rankList(){
            let params = {
                sellerId:this.userId,
                goodsId:this.goodsId
            }
            apiHttp.detailHttp.rankList(params,resp=>{
                if(resp.code == 200){
                    this.bigStar = Number(resp.data.totalRank.toFixed())
                    this.commentTags = resp.data.totalTags
                    this.totalElements = resp.data.comments.totalElements
                    if(resp.data.comments.totalElements>0){
                        this.artlist = !this.artlist
                        this.commTagsIndex = resp.data.totalTags[0].id
                        this.pwComment()
                    }else{
                        Toast('暂无评论')
                    }
                }
            })
        },
        // 陪玩的评价
        pwComment(){
            let params = {
                tagsId: this.commTagsIndex,
                sellerId:this.userId,
                goodsId:this.goodsId
            }
            apiHttp.detailHttp.pwComment(params,resp=>{
                if(resp.code == 200) {
                    for(let i in resp.data.content){
                        resp.data.content[i].rank = Number(resp.data.content[i].rank)
                    }
                    this.commentList = resp.data.content
                }else{
                    Toast(resp.message)
                }
            })
        },
        //获取钻石购买列表
        getsysDiamondInstallList() {
            let that = this;
            let data={
                type:1,
                source:1            // 1是安卓      2是IOS
            }
            apiHttp.apiCenter.getsysDiamondInstallList(data,resp=> {
                if(resp.code==200){
                    that.diamondData=resp.data
                    that.selectMoney = resp.data[0].price
                }
            })
            if( that.selectMoney>this.zfZhyue){//如果余额不够，默认选择支付宝支付，选中余额支付
                that.zfType=0;
            }else{
                //选中余额支付，禁用单选按钮支付宝支付和微信支付
                this.zfType = -1
            }
        },
        // 会员其他金额购买钻石计算查询
        getOtherMoneyDiamond(){
            let that = this;
            var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
            if(that.selectMoney==0||that.selectMoney==""||that.selectMoney<1||!reg.test(that.selectMoney)){
                that.money='';
                return ;
            }
            let url = '?money='+that.otherMoney+'&source='+that.source+'';
            apiHttp.apiCenter.getOtherMoneyDiamond(url,'',resp=> {
                if(resp.code==200){
                    that.diamond = resp.data.finalMoney;
                    that.presentDiamond =  resp.data.present;
                }else{
                    that.diamond = 0
                }

            })
        },
        //选中购买钻石金额
        activeClick(index,item){
            this.selectMoney = item.price
            this.active = index
            this.otherMoney='';
            if(this.selectMoney>this.zfZhyue) {//如果余额不够，默认选择支付宝支付，选中余额支付
                this.zfType = 0;
            }else{
                //选中余额支付，禁用单选按钮支付宝支付和微信支付
                this.zfType = -1
                this.yuESelect = true
            }
        },
        selectYu(){
            if(this.selectMoney>this.zfZhyue){
                this.yuESelect=!this.yuESelect;
            }else{
                this.yuESelect=!this.yuESelect;
                if(this.yuESelect){
                    this.zfType = -1
                }else{
                    this.zfType = 0
                }
            }
        },
        selectZhiFu(index){
            if(this.selectMoney<this.zfZhyue){
                if(this.yuESelect == false){
                    this.zfType = index
                }else{
                    this.zfType = -1
                }
            }else{
                this.zfType = index
            }
        },
        //金额输入事件
        otherInput(){
            let that = this;
            this.otherMoney = this.otherMoney.target.value.replace(/[^\d]/g,'');
            if(this.otherMoney>50000){
                Toast("单笔最高充值金额50000元，请重新输入")
                this.otherMoney='';
            }
            var nums = this.otherMoney.split('.');
            if(nums.length>1){
                if(nums[1].length>2){
                    Toast("只支持2位小数，请重新输入")
                    this.otherMoney = '';
                }
            }
            if(this.otherMoney){
                this.active = -1
                this.selectMoney = this.otherMoney
            }
            that.getOtherMoneyDiamond();
        },
        //filter
        RemoveMorewords(strValue) {  
            if(strValue!= null && strValue != ""){  
                var reg = /[\u4e00-\u9fa5]/g;   
                return strValue.replace(reg, "");   
            }  
            else  
                return "";  
        },
        //立即下单
        listentopayfor() {
            if(this.placeTiem == "现在"){
                let date = new Date();
                let y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let minute = date.getMinutes();
                let second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                this.orderT = y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
            }

            let params={
                userId:this.userId,   //用户id
                serviceAuthId:this.serviceAuthId,   //服务id
                useStartTime:this.orderT,
                count:this.payforNum,
                couponId:this.yhqId,     //优惠券id
                source:2,       //1APP 2微信
            }
            apiHttp.detailHttp.payforOrderbefore(params,resp=>{
                if(resp.code == '200') {
                    //Toast('创建订单成功')
                    this.orderpayforId = resp.data
                    this.paymentMoney = true
                    this.paymentRadio = -1
                }else{
                    Toast(resp.message)
                }     
            })
        },
        //确认支付
        clickpayforEvent() {
            let payType = ''
            if(this.$isiOS){
                if(this.$store.state.iosTrue == true){
                    if(this.paymentRadio == 1){
                        payType = 12
                    }else if(this.paymentRadio == 2){
                         payType = 3
                    }
                }else{
                    if(this.paymentRadio == 1){
                        payType = 10
                    }else if(this.paymentRadio == 2){
                        payType = 2
                    }
                }
            }else if(this.$isAndroid){
                if(this.paymentRadio == 1){
                    payType = 10
                }else if(this.paymentRadio == 2){
                    payType = 2
                }else {
                    payType = ''
                }
            }
            let params={
                orderId:this.orderpayforId,
                payType:payType,
                autoCost:this.yuESelect
            }
            apiHttp.detailHttp.payforOrderafter(params,resp=>{
                if(resp.code == '200'){
                    //Toast('支付'+resp.message)
                    if(payType == 10){
                        this.formZFB = resp.data
                        const div = document.createElement('div')
                        div.innerHTML = this.formZFB
                        document.body.appendChild(div)
                        document.forms[0].submit()
                    }else if(payType == 12){
                        window.webkit.messageHandlers.alipay.postMessage(resp.data)
                    }else if(payType == 2){
                        location.href = resp.data
                    }else{
                        this.$router.push({
                            name:'orderDetail',
                            params:{orderId:this.orderpayforId},
                            query:{type:1}
                        });
                    }

                }else{
                    Toast(resp.message)
                }
            });
            // this.foundationPayfor()
        },
        // ios支付成功之后跳转路径
        iosZFBsuccess(success){
            let self = this
            Toast(success)
            setTimeout(()=>{
                self.$router.push({
                    name:'order'
                })
            },500)
        },
        //更换服务----下单step1
        onChange(picker, value, index) {
            this.serviceAuthId = this.service[index].serverAuthId
            this.onchangename = value
            this.serviceLb = false
            this.payforNum = 1
            //总金额
            let price = this.RemoveMorewords(value).trim();
            let priceVal = price.replace(/[&\|\\\*^%￥/$#@\-]/g,"");
            this.pwPrice = priceVal*(this.payforNum);
        },
        //时间---------下单step2
        onChangeTime(picker, values, index) {
            let self = this
            this.placeTiem = values.join("   ")
            let day = values[0].substring(values[0].length - 2)
            let hours = values[1].substring(0,values[1].length - 1)
            let minutes = values[2].substring(0,values[2].length - 1)
            let date = new Date()
            
            if(day == "今天"){
                date.setTime(date.getTime())
                this.orderT = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${hours}:${minutes}:00`
            }else if(day == "明天"){
                date.setTime(date.getTime()+24*60*60*1000)
                this.orderT = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${hours}:${minutes}:00`
            }else{
                date.setTime(date.getTime()+24*60*60*1000*2)
                this.orderT = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${hours}:${minutes}:00`
            }
        },
        //点击服务切换数据
        listentServiceEvent(id) {
            this.personalMessage(id)
        },
        //个人信息
        personalMessage(id){
            let fwId;
            if(id) {
                fwId = id;
            }else{
                fwId = this.serviceId;
            }
            let params = {
                userId:this.userId,
                serviceId:fwId,
            };
            apiHttp.detailHttp.personalMessage(params,resp=>{
                if(resp.code == 200) {                   
                    for(let i in resp.data.serviceLogo){
                        if(resp.data.serviceLogo[i].serverId == resp.data.serverId){
                            this.serviceAuthId = resp.data.serviceLogo[i].serverAuthId
                        }
                    }
                    if(resp.data.headImg==null || resp.data.headImg==''){
                        resp.data.headImg = '/user/head/defaultHeadImage.png';
                    }
                    //resp.data.isGif = false;
                    this.audioTime = resp.data.audioTime;
                    this.audioSrc =  resp.data.audioUrl;              
                    this.personal = resp.data;
                    this.service = resp.data.serviceLogo;          
                    this.userPhoto = resp.data.userPhoto;
                    this.onchangename = this.personal.serverName+''+this.personal.price+'钻石/'+this.personal.priceUnit;
                    this.pwPrice = this.personal.price;
                    //this.checkImg(); 
                                                        
                }
            })
        },
        //服务品类数据
        clickOrder() {
            let params = {
                userId:this.userId
            }
            apiHttp.detailHttp.personalService(params,resp=>{
                if(resp.code == 200) {
                    let arr = []
                    for(let i = 0; i < resp.data.length; i++){
                        arr.push(resp.data[i].serviceName+''+resp.data[i].price+'钻石/'+resp.data[i].priceUnit);
                    }
                    this.columns = arr
                    this.couponsList()
                }else{
                    Toast(resp.message)
                }
            });
            this.payfor = true
        },
        //显示钻石充值弹框
        clickRechargeEvent(val) {
            let that = this;
            var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
            // if(that.active == -1&&(that.otherMoney==""||that.otherMoney<1||!reg.test(that.otherMoney))){
            //     Toast("请选中或输入购买钻石金额，不能小于1.00");
            //     return ;
            // }
            if(that.yuESelect==false&&that.zfType==-1){
                Toast("请选择支付类型");
                return;
            }
            if(that.zfType==0&&that.yuESelect==false){
                //支付宝接口
                that.payType=10;
                that.autoCost=false;
                that.creditsPay();
                return;

            }else if(that.zfType==1&&that.yuESelect==false){
                //微信支付
                that.payType=2;
                that.autoCost=false;
                that.creditsPay();
                return;
            }
            if(that.yuESelect==true&&that.zfType==0){
                //支付宝接口
                that.payType=10;
                that.autoCost=true;
                that.creditsPay();
                return;
            }else if(that.yuESelect==true&&that.zfType==1){
                //微信支付
                that.payType=2;
                that.autoCost=true;
                that.creditsPay();
                return;
            } else {
                //余额支付
                that.payType='';
                that.autoCost=true;
                that.creditsPay();
                return;
            }
        },
        creditsPay(){
            let that = this;
            let data={
                money:that.selectMoney,//金额
                payType:that.payType,//支付类型
                count:1,
                source:1,
                autoCost:that.autoCost

            }
            apiHttp.apiCenter.creditsPay(data,resp=> {
                if (resp.code == 200) {
                    Toast("支付成功！");
                    this.reCharge = !this.reCharge
                    this.getUserWalletDetail()
                }else{
                    Toast(resp.message)
                }
            })
        },
        closePayment() {
            this.paymentMoney = false
            this.foundationPayfor();
        },
        foundationPayfor() {
            if(this.paymentRadio == '1') {
                this.payforMethodation = '支付宝支付';
            }else if(this.paymentRadio == '2') {
                this.payforMethodation = '微信支付';
            }else if(this.paymentRadio == '3') {
                this.payforMethodation = '余额支付';
            }
        },
    },
    filters:{
        createTimeFile(val){
            let d = new Date(val)
            return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}` 
        }
    },

};
</script>
<style scoped>
.ico-video{
    position: absolute;
    left: calc(50% - 1rem);
    top: calc(50% - 1rem);
    background: url("../assets/image/bf.png") no-repeat center;
    background-size: 100%;
    width: 2rem;
    height: 2rem;
    display: block;
    z-index: 999;
}
.audiop{
    margin-bottom: 1rem;
    color: #D84E4D;
}
.giftTX{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
}
.margin-bot{
    margin-bottom: 0.3rem;
}
.van-cell:not(:last-child)::after{
    bottom: inherit;
}
.server-descript{
   position: fixed;
    left: 0;
    bottom:0;
    width: 90%;
    padding: 1rem 5%;
    background: url('../assets/image/detail/img_2@3x.png') no-repeat;
    background-size: cover;
}
input[range]{
    opacity: 0;
}
.pinlei{
    height: 1rem;
    padding: .3rem .6rem;
    width: calc(100% - 1.2rem);
    border-bottom: #f5f5f5 solid .04rem;
}
.pinlei span{
    line-height: 1rem;
    font-size: .54rem;
}
.swiper-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}
/*钻石充值支付样式*/
.xuanze {
    width: .8rem;
    margin-right: .5rem;
    margin-top: .4rem;
}
.zhifu-box{
    height: 3rem;
    line-height: 1.5rem;
    width: 100%;
}
.zhifu-tit{
    width: 3rem;
    display: inline-block;
}
.zhifu{
    float: left;
    width: calc(100% - 3rem);
    min-height: 1.5rem;
}
.zhifu span{
    width: 50%;
    height: 1.5rem;
    display: inline-block;
    /* float: left; */
    color: #999;
}
.zhifu span:nth-child(3){
    width: 100%;
}
.zhifu span:nth-child(3) .quan{
    margin-top: .4rem;
}
.zhifu span .fangshi{
    width: .9rem;
    margin-top: .3rem;
    margin-right: .3rem;

}
.quan{
    width: .6rem;
    height: .6rem;
    display: block;
    float: left;
    border:solid 1px #eee;
    border-radius: 50%;
    margin-right: .5rem;
    margin-top: .1rem;
}
.yuESelect{
    background-color: #D84F4D;
}
.chongzhi{
    border:#D84F4D .04rem solid;
    display: inline-block;
    height: .7rem;
    line-height: .75rem;
    font-size: .5rem;
    width: 1.9rem;
    text-align: center;
    border-radius: .4rem;
    margin-top: .1rem;
}
.yw-detail-container{
  background-color: #333;
  height: 100%;
}
.mon-box{
  height: .8rem;
}
.mon-box span{
  height: .8rem;
  display: inline-block;
  line-height: .8rem;
}
.img-bj-box{
  width: 100%;
  z-index: 9;
}
.detail{
  position:absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
}
.game-name-bjc{
  background-color: #333;
}
.game-dw-bjc{
  background-color: #D84F4D;
}
/*充值*/
.yw-popup-recharge{
    border-radius: 0.3rem 0.3rem 0 0;
}
.yw-popup-recharge .desc {
    padding: 0.6rem 0;
}
.yw-popup-recharge .diamonds {
    padding: 0 3%;
}
.yw-popup-recharge .diamonds .color-yellow {
    padding-left: 0.7rem;
    line-height: 0.56rem;
    background: url('../assets/image/detail/img_diamonds_s@2x.png') no-repeat;
    background-size: 0.56rem 0.46rem;
    margin-bottom: 0.1rem;
}
.yw-popup-recharge .diamonds .sign {
    position: absolute;
    top: 0;
    right: 0.1rem;
    color: #fff;
    font-size: 0.18rem;
}
.yw-popup-recharge .diamonds .van-col--6 {
    position: relative;
    color: #999;
    border-radius: 0.2rem;
    padding: 0.2rem 0.4rem;
    border: 0.04rem solid rgb(233, 231, 231);
    background: url('../assets/image/detail/img_bj_u@2x.png') no-repeat top right;
    background-size: 1.64rem 0.56rem;
}
.yw-popup-recharge .diamonds .van-col--6.active {
    font-weight: 500;
    color: #333333;
    border: 0.04rem solid #D84E4D;
}
.yw-popup-recharge .title {
    font-size: 0.56rem;
    padding: 0.6rem 0.6rem;
    border-bottom: 0.02rem solid rgb(233, 231, 231);
}
.yw-popup-recharge .footer {
    font-size: 0.56rem;
    padding: 0.6rem 0.6rem;
}
.yw-popup-recharge .footer .money {
    padding: 0.3rem 0;
}
.yw-popup-recharge .icons_close {
    width: 0.5rem;
    height: 0.52rem;
    display: flex;
    float: right;
    background: url('../assets/image/detail/icon_close_gray@2x.png') no-repeat;
    background-size: cover;
}
/*购买礼物*/
.buypresent p .line {
  margin: 0.2rem 0 0;
  padding: 0.2rem 0.6rem 0 !important;
  border-top: 0.02rem solid rgb(233, 231, 231);
}
.buypresent p div.van-row {
  padding: 0 0.6rem;
}
.buypresent p {
  background: #fff;
  margin-bottom: 0.4rem;
  padding: 0.6rem 0;
}
.buypresent {
  width: 90%;
  border-radius: 0.5rem;
  background: #f5f5f5;
}
.buypresent .van-row {
  line-height: 1.2rem;
}
.payfor .carryok {
  line-height: initial;
}
.payfor .action {
  padding: 0.5rem 0;
  border-bottom: 0.02rem solid rgb(233, 231, 231);
}
.payfor .carryok .color-9 {
  border-right: 0.02rem solid rgb(233, 231, 231);
}
.payfor .carryok>div {
    padding: 0.6rem 0;
}
.payfor .van-cell {
  width: 50%;
  float: left;
}
.payfor span {
  padding: 0 0.6rem;
}
.queen {
  background: url('../assets/image/detail/img_diamonds_s@2x.png') no-repeat right center;
  background-size: 0.6rem 0.5rem;
  padding-right: 0.8rem;
}
.payfor .van-cell{
    padding: 10px;
}
.payfor .van-cell:nth-child(1) {
    background: url('../assets/image/detail/icon_zfb@2x.png') no-repeat 0.6rem center;
    background-size: 1.12rem 1.12rem;
    padding-left: 2rem;

}
.payfor .van-cell:nth-child(2) {
    background: url('../assets/image/detail/icon_wx@2x.png') no-repeat 0.6rem center;
    background-size: 1.12rem 1.12rem;
    padding-left: 2rem;
}
/*详情主页*/
.yw-detail-container .service {
  padding: 0 5%;
  margin-top: .3rem;
}
.yw-detail-container .service img {
  width: .8rem;
  margin-right: 0.2rem;
  display: inline-block;
}
.yw-detail-container div.step1 {
    padding: 6% 5% 0;
}
.yw-detail-container div.step2 {
    max-height: 60%;
    position: fixed;
    width: auto;
    bottom: 34%;
    right: 0;
    padding: 0 5%;
}
.step4{
    position: absolute;
    width: auto;
    bottom: 100%;
    left: 0;
    padding: 0 5%;
}
.yw-detail-container .step3 p:nth-child(1) {
  color: #fff;
  margin-bottom: 1rem;
  font-size: .5rem;
}
/* 语音播放 */
.btn-audio{
    position: relative;
    background: #fff;
    border: #fff;
    color: #d84e4d;
    padding: 0.3rem 0.3rem;
    border-radius: 1rem;
    min-width: 25%;
    display: inline-block;
    margin-right: 1.2rem;
    border: 0.04rem solid #D84E4D;
}
.btn-audio-img>em{
    display: inline-block;
    width: 0.8rem;
    height: 0.68rem;
    z-index: 999;
    margin-right: 0.2rem;
    background: url('../assets/image/detail/icon_voice@3x.png') no-repeat;
    background-size: cover;
}
.btn-audio-gif>em{
    display: inline-block;
    width: 0.8rem;
    height: 0.68rem;
    z-index: 999;
    margin-right: 0.2rem;
    background: url('../assets/image/detail/audio.gif') no-repeat;
    background-size: cover;
}
.btn-audio>span{
    position: relative;
    bottom: 0.06rem;
    right: 0.1rem;;
}
.btn-audio>audio{
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    z-index: -1;
}
.step3>p:nth-child(2){
    font-size: 0.6rem;
}
.yw-detail-container .step3 .close {
  width: 0.96rem;
  height: 0.94rem;
  display: flex;
  float: right;
  background: url('../assets/image/detail/icon_close@2x.png') no-repeat;
  background-size: cover;
  position: relative;
  top: 0.2rem;
}
.yw-detail-container .step2 .fl {
  position: absolute;
  bottom: 0;
}
.yw-detail-container .step2 .fr p:nth-child(2) {
  margin: 0.6rem 0;
}
.yw-detail-container .step2 img {
  max-width: 1.6rem
}
.yw-detail-container .step2 p span {
  color: #fff;
  font-weight: 700;
  display: flex;
  justify-content: center;
  padding-bottom: .3rem;
}
.yw-detail-container .step1 {
  top: 0;
  background: url('../assets/image/detail/img_1@3x.png') no-repeat;
  background-size: 100% 100%;
}
.yw-detail-container .step1 ul {
  float: left;
  display: flex;
  max-width: 100%;
  color: #fff;
  font-weight: 700;
  padding: 0.2rem 0.4rem;
  background: #0000003d;
  border-radius: 1.6rem;
}
.yw-detail-container .step1 .sex img {
  margin-top: .05rem;
  width: .6rem;
}
.yw-detail-container .step1 ul li:nth-child(1) img {
  border-radius: 50%;
  height: 100%;
}
.yw-detail-container .step1 ul li:nth-child(1) {
    max-width: 1.6rem;
    max-height: 1.6rem;
}
.yw-detail-container .step1 ul li:nth-child(2) {
    max-width: 100%;
    padding: 0 0.6rem;
}
.yw-detail-container .step1 ul li:nth-child(2) span:nth-child(2) {
    margin: 0 0.1rem 0 0.4rem;
}
.yw-detail-container .step1 ul li:nth-child(3) span {
    background: #fff;
    border: #fff;
    line-height: 1.6rem;
    padding: 0.2rem 0.3rem;
}
.yw-detail-container .step1 .share {
  width: 0.96rem;
  height: 0.96rem;
  display: flex;
  float: right;
  background: url('../assets/image/detail/icon_share@2x.png') no-repeat;
  background-size: cover;
}
/*付款方式*/
.yw-popup-payment .van-cell {
    padding: 15px 15px;
}
/* .yw-popup-payment .van-cell:nth-child(1) {
    background: url('../assets/image/detail/icon_zfb@2x.png') no-repeat 0.6rem center;
    background-size: 1.12rem 1.12rem;
    padding-left: 2rem;
}
.yw-popup-payment .van-cell:nth-child(2) {
    background: url('../assets/image/detail/icon_wx@2x.png') no-repeat 0.6rem center;
    background-size: 1.12rem 1.12rem;
    padding-left: 2rem;
} */
.yw-popup-payment .salay {
    font-size: 1rem;
    padding: 1rem 0;
    border-bottom: 0.02rem solid rgb(233, 231, 231);
}
/*立即下单*/
#fuhao{
    font-size: 1rem;
}
.arrow-img{
  width: 0.4rem !important;
  height: 0.6rem !important;
  margin-left: 0.2rem;
  position: relative;
  top: 0.1rem;
}
.yw-popup-payfor{
    border-radius: 0.5rem 0.5rem 0 0;
}
.yw-popup-payfor p.svcname {
  padding: 0.2rem 0.6rem;
  line-height: 1.5rem;
  border-bottom: 0.02rem solid #eee;
}
.yw-popup-payfor p.svcname:hover {
  background: #f5f5f5;
}
.footer .btn-f00 {
    min-width: 60%;   
}
.step3 .btn-buy{
    border: 0;
    padding: 0.34rem 0.34rem;
    display: inline-block;
    min-width: 30%;
    border-radius: 1rem;
    text-align: center;
}
.footer .money {
    padding: 0.3rem 0;
    font-size: 0.65rem;
}
.footer {
    padding: 0.6rem 0.5rem;
    border-top: 0.02rem solid rgb(233, 231, 231);
}
.title {
    padding: 0.6rem 0.6rem 0.3rem;
    font-size: 0.56rem;
    color: #333;
    border-bottom: 0.02rem solid rgb(233, 231, 231);
}
.icons_close {
    width: 0.5rem;
    height: 0.52rem;
    display: flex;
    float: right;
    background: url('../assets/image/detail/icon_close_gray@2x.png') no-repeat;
    background-size: cover;
}
/*打赏样式*/
.zhuanshi-box{
    padding: 0 .6rem;
}
.presentSwiper .listds {
    width: 16%;
    float: left;
    padding: 3% 4.5%;
    text-align: center;
}

.title {
    font-size: 0.56rem;
    padding: 0.6rem 0.6rem;
    border-bottom: 0.02rem solid rgb(233, 231, 231);
}
.footer {
    font-size: 0.56rem;
    padding: 0.6rem 0.6rem;
    border-top: 0.02rem solid rgb(233, 231, 231);
}

.footer .money {
    padding: 0.3rem 0;
}

.icons_close {
    width: 0.5rem;
    height: 0.52rem;
    display: flex;
    float: right;
    background: url('../assets/image/detail/icon_close_gray@2x.png') no-repeat;
    background-size: cover;
}
/*评价*/
.yw-popup-list{
    border-radius: 0.5rem 0.5rem 0 0;
}
.van-tag::after {
  display: none;
}
.artLabel {
    padding: 0.6rem;
    padding-bottom: 0.2rem;
}
.list .van-col:nth-child(2) .color-6 {
    padding: 0.3rem 0;
}
.list img {
    max-width: 2rem;
    height: 2rem;
}
.list {
    padding: 0.4rem 0.6rem;
    border-bottom: 0.02rem solid rgb(233, 231, 231);
}
.title {
    padding: 0.6rem 0.6rem;
    border-bottom: 0.02rem solid rgb(233, 231, 231);
}
.icons_tags {
    background: url('../assets/image/detail/icon_label@2x.png') no-repeat;
    background-position: 0 0.2rem;
    background-size: 0.62rem 0.62rem;
    padding-left:1rem;
}
.icons_tags span{
    padding-right: .2rem;
}
.icons_close {
    width: 0.5rem;
    height: 0.52rem;
    display: flex;
    float: right;
    background: url('../assets/image/detail/icon_close_gray@2x.png') no-repeat;
    background-size: cover;
}
/*钻石*/
.paddingTop15{
    padding-top:.5rem;
}
.zuanshi-box {
    padding: .4rem;
    width: calc(100% - .8rem);
    border: solid .04rem #f5f5f5;
    border-radius: .45rem;
}

.zuanshi-box-span {
    width: 100%;
    display: block;
    height: .6rem;
    color: #FFB400;
}

.zuanshi-box-span img {
    width: .6rem;
    padding-right: .2rem;
}

.zuanshi-box-span em {
    height: .6rem;
    line-height: .6rem;
    display: inline-block;
}
.song {
    position: absolute;
    right: 0;
    top: 0;
    background-image: url('../assets/image/center/img_bj_u.png');
    background-repeat: no-repeat;
    background-size: 100%;
    min-width: 2rem;
    height: .8rem;
    padding-right: .2rem;
    display: block;
    color: #fff;
    font-size: .4rem;
    padding-left: .2rem;
}
.active .zuanshi-box {
    border: solid .04rem #D84F4D;
}
.input-zuan {
    height: 1rem;
    line-height: 1rem;
    width: 100%;
    display: block;
    border: solid .04rem #f5f5f5;
    border-radius: .2rem;
    font-size: .6rem;
    padding: .3rem 0;
}
.border-bottom{
    border-bottom: 0.04rem solid #f5f5f5;
}
.commTagsIndexClass{
    color:#fff;
    background-color: #d84e4d;
}
.swipe-img-box{
    width: 100%;
    overflow: hidden;
    text-align: center;
}
.swipe-img-box img{
    vertical-align: middle;
    min-height: 100%;
    min-width: 100%;
    width: auto;
    margin: 0 -100%;
}
</style>
